<!--组织架构列表页-->
<template>
  <!-- 组织架构列表搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="组织名称">
        <el-input placeholder="请输入内容" style="width:220px;" v-model="searchOrgForm.orgName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadOrg">查询</el-button>
      </el-form-item>
      <el-form-item style="padding-left: 800px;">
        <el-button type="primary" @click="beforeAddOrg">新增组织</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--  新增组织弹窗-->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="组织名称">
            <el-input placeholder="请输入内容" v-model="saveOrgForm.orgName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织类型">
            <el-select placeholder="请选择" v-model="saveOrgForm.orgType">
              <el-option label="公司" value="1"></el-option>
              <el-option label="总公司" value="2"></el-option>
              <el-option label="分公司" value="3"></el-option>
              <el-option label="部门" value="4"></el-option>
              <el-option label="办事处" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="归属组织">
            <el-select placeholder="请选择" v-model="saveOrgForm.belongOrg">
              <el-option label="公司" value="1"></el-option>
              <el-option label="总公司" value="2"></el-option>
              <el-option label="分公司" value="3"></el-option>
              <el-option label="部门" value="4"></el-option>
              <el-option label="办事处" value="5"></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作地点">
            <el-input placeholder="请输入内容" v-model="saveOrgForm.workPlace"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="描述">
        <el-input type="textarea" placeholder="请输入内容" v-model="saveOrgForm.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button  @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="saveOrg">确 定</el-button>
    </template>
  </el-dialog>
  <!-- 组织架构列表 -->
  <el-card style="margin:20px;">
    <el-table :data="OrgArr">
      <el-table-column type="selection" width="80"></el-table-column>
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="brand" label="组织名称" align="center">
      </el-table-column>
      <el-table-column prop="license" label="组织类型" align="center"/>
      <el-table-column prop="code" label="组织负责人" align="center"/>
      <el-table-column prop="type" label="成员" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"@click="editOrg(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteOrg(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";

const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增组织');
const beforeAddOrg = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增组织';
  console.log(dialogTitle.value);
}
const searchOrgForm = ref({orgName:'',});
//定义搜索卡片重置按钮的功能 清空值+重新加载车辆
const resetSearch = ()=>{
  searchOrgForm.value = {};
  loadOrg();
}
const saveOrgForm  =  ref ({
  orgName: '',
  orgType: '',
  belongOrg:'',//归属组织
  workPlace:'',//工作地点
  description:'',//描述
})
//定义加载组织的方法
const loadOrg = ()=>{

}
//定义数组用来保存组织表格数据
const OrgArr = ref([]);
//定义保存组织架构
const saveOrg = ()=>{

}
//处理保存组织架构弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}
//定义编辑组织架构的方法
const editOrg = (id)=>{

}
//定义删除指定组织架构的方法
const deleteOrg = (id)=>{

}
//onMounted() VUE的生命周期钩子 在DOM渲染完毕后立即执行
onMounted(()=>{
  loadOrg();
})

</script>